<script setup lang="ts">
	//发布岗位
	import { onMounted, reactive, ref } from "vue";
	import {
		validatePhoneNumber
	} from '@/utlis/common.js'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		useRouter
	} from 'uni-mini-router'
	const router = useRouter()
	import {
		onShow,
		onHide,
		onLoad
	} from '@dcloudio/uni-app'
	// import form from "../../../uni_modules/uview-plus/libs/config/props/form";
	import {
		userStore
	} from '@/pinia';
	const userStoreInfo = userStore();
	const {
		proxy,
	} = getCurrentInstance()
	
	let itemId = ref('')
	let form1 = ref(null)
	let marketType = ref([])

	let form = reactive({
		jobName:'',
		jobCategoryId:'',
		jobCategoryName:'',
		jobDescription2:'',
		comprehensiveSalaryType:'',
		comprehensiveSalaryStart:'',
		comprehensiveSalaryEnd:'',
		basicBenefits:'',
		educationRequirements:'',
		educationRequirementsName:'',
		workExperienceTime:'',
		workExperienceTimeName:'',
		provinceId:'',
		provinceName:'',
		cityId:'',
		cityName:'',
		areaId:'',
		areaName:'',
		address:'',
		jobRemark:'',
		contactsUser:'',
		contactsPhone:''
	})
	let Rules = ref({
		// type: {},
		// title: {
		// 	required: true,
		// 	message: '请输入正确内容',
		// 	trigger: ['change']
		// },
		// description: {
		// 	required: false,
		// 	message: '请输入正确内容',
		// 	trigger: ['change']
		// },
		// project: {
		// 	required: false,
		// 	message: '请输入正确内容',
		// 	trigger: ['change']
		// },
		// zili: {
		// 	required: false,
		// 	message: '请输入正确内容',
		// 	trigger: ['change']
		// },
		// anli: {
		// 	required: false,
		// 	message: '请输入正确内容',
		// 	trigger: ['change']
		// },
		// fangshi: {
		// 	required: false,
		// 	message: '请输入正确内容',
		// 	trigger: ['change']
		// },
		// human: {
		// 	required: true,
		// 	message: '请输入正确内容',
		// 	trigger: ['change']
		// },
		// phone: [{
		// 	required: true,
		// 	message: '手机号码必填',
		// },
		// {
		// 	validator: (rule, value, callback) => {
		// 		console.log(value);
		// 		return validatePhoneNumber(value);
		// 	},
		// 	message: '手机号码不正确',
		// 	trigger: ['change'],
		// }],
	})
	let state = reactive({
		type:'',
		showSelect:false,
		actions:[],
		educationBackgroundAction:[
			{name: '不限',val:''},
			{name: '初中及以下',val:0},
			{name: '高中（中专）',val:1},
			{name: '大学（本专科）',val:2},
			{name: '硕士及以上',val:3},
			{name: '高中（中专）',val:1},
		],
		workYearAction:[
			{name: '1年以内',val:0},
			{name: '1-3年',val:1},
			{name: '3-5年',val:2},
			{name: '5-8年',val:3},		
			{name: '8年以上',val:4},
		]
	})
	
	onLoad((options) => {
		console.log(options,'options')
		if(options && options.pageType == "jobCategory"){
			// form.value = uni.ge
			// let data = uni.getStorageSync('jobInfo')
			form = JSON.parse(uni.getStorageSync('jobInfo'))
			form.jobCategoryId = options.jobCategoryId
			form.jobCategoryName = options.name
			
		}else if(options && options.pageType == "jobDesc"){
			form = JSON.parse(uni.getStorageSync('jobInfo'))
			form.jobDescription2 = options.info
		}else if(options && options.pageType == "jobPay"){
			form = JSON.parse(uni.getStorageSync('jobInfo'))
			form.comprehensiveSalaryType = options.comprehensiveSalaryType
			form.comprehensiveSalaryStart = options.comprehensiveSalaryStart
			form.comprehensiveSalaryEnd = options.comprehensiveSalaryEnd
			form.basicBenefits = options.basicBenefits
			form.comprehensiveSalaryType = options.comprehensiveSalaryType
			
		}else if(options && options.pageType == "jobAddress"){
			form = JSON.parse(uni.getStorageSync('jobInfo'))
			form.provinceId = options.provinceId
			form.province = options.province
			form.city = options.city
			form.cityId = options.cityId
			form.areaName = options.areaName
			form.areaId = options.areaId
			form.address = options.address
			
		}
	})
	const showSelectBtn = (type)=>{
		state.type = type
		switch (type){
			case 'educationBackground':
				state.actions = state.educationBackgroundAction
				break;
			case 'workYear':
				state.actions = state.workYearAction
				break;
			default:
				break;
		}
		
		state.showSelect = true
	}
	const SelectFun = (e)=>{
		let type = state.type
		switch (type){
			case 'educationBackground':
				form.educationRequirements = e.val
				form.educationRequirementsName = e.name
				break;
			case 'workYear':
				form.workExperienceTime = e.val
				form.workExperienceTimeName = e.name
				break
			default:
				break;
		}
	}
	const typeChose = () => {
		let arr = marketType.value.map((item) => {
			return item.name
		})
		// console.log(marketType.value);
		uni.showActionSheet({
			itemList: arr,
			success: function (res) {
				form.value.type = arr[res.tapIndex]
				form.value.typeId = marketType.value[res.tapIndex].id
			},
			fail: function (res) {
				// console.log(res.errMsg);
			}
		});
	}
	const routerLink = (name)=>{
		uni.setStorageSync('jobInfo',JSON.stringify(form))
		router.push({
			name: name,
			params: {}
		})
	}
	const submitForm = () => {
		proxy.$req('POST',proxy.$api.meiyeRecruitJob3Add,form).then(res=>{
			uni.removeStorageSync('jobInfo')
			uni.showToast({
				title: '操作成功',
				icon: 'none'
			})
			router.push({
				name: 'postJob',
				params: {}
			})
			// if(res.code ===200){
			// 	uni.removeStorageSync('jobInfo')
			// 	uni.showToast({
			// 		title: '操作成功',
			// 		icon: 'none'
			// 	})
			// 	router.push({
			// 		name: postJob,
			// 		params: {}
			// 	})
			// }
			console.log(res,'res1111')
		}).catch(errors => {
			console.log(errors);
			uni.showToast({
				title: '请检查表单',
				icon: 'none'
			})
		})
		// form1.value.validate().then(res => {
			
		// })
		
		// proxy.$req('POST',proxy.$api.meiyeRecruitJob3Add, form).then(res>{
		// 	console.log(res,'res')
		// })
	}
</script>
<template>
	<view class="form">
		<u--form :model="form" :rules="Rules" ref="form1" labelPosition="top" labelWidth="150">
			<u-form-item class="formItem" label="" prop="jobName">
				<template #label>
					<view class="r-flex-between-center">
						<view class="">
							<text>*</text>
							<text>职位名称</text>
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</template>
				<u--input v-model="form.jobName" border="none" placeholder="请填写职位名称"></u--input>
			</u-form-item>
			<u-form-item class="formItem " label="" prop="jobCategoryName" @click="routerLink('jobCategory')">
				<template #label>
					<view class="r-flex-between-center">
						<view class="">
							<text>*</text>
							<text>职位类别</text>
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</template>
				<u--input v-model="form.jobCategoryName" border="none" disabled disabledColor="#fff"
					placeholder="请填写职位类别"></u--input>
			</u-form-item>
			<u-form-item class="formItem " label="" prop="type" @click="routerLink('jobDesc')">
				<template #label>
					<view class="r-flex-between-center">
						<view class="">
							<text>*</text>
							<text>职位描述</text>
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</template>
				<u-parse :content="form.jobDescription2" v-if='form.jobDescription2'></u-parse>
				<u--input v-else border="none" disabled disabledColor="#fff"
					placeholder="介绍工作内容,职位要求,加分项等"></u--input>
			</u-form-item>
			
			<u-form-item class="formItem" label="" prop="title" @click="routerLink('jobPay')">
				<template #label>
					<view class="r-flex-between-center">
						<view class="">
							<text>*</text>
							<text>综合薪资</text>
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</template>
				<view class="" v-if="form.comprehensiveSalaryType == 0">面议</view>
				<view class="" v-else-if="form.comprehensiveSalaryType == 1">{{form.comprehensiveSalaryStart}}-{{form.comprehensiveSalaryEnd}}元/月</view>
				<u--input v-else  border="none" placeholder="请选择合理的薪资范围"></u--input>
			</u-form-item>
			<u-form-item class="formItem" label="" prop="educationRequirementsName" @click="showSelectBtn('educationBackground')">
				<template #label>
					<view class="r-flex-between-center">
						<view class="">
							<text>*</text>
							<text>学历要求</text>
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</template>
				<u--input v-model="form.educationRequirementsName" disabled disabledColor="#fff" border="none" placeholder="请选择学历要求"></u--input>
			</u-form-item>
			<u-form-item class="formItem" label="" prop="workExperienceTimeName" @click="showSelectBtn('workYear')">
				<template #label>
					<view class="r-flex-between-center">
						<view class="">
							<text>*</text>
							<text>工作年限</text>
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</template>
				<u--input v-model="form.workExperienceTimeName" border="none" disabled disabledColor="#fff" placeholder="请选择年限要求"></u--input>
			</u-form-item>
			<u-form-item class="formItem" label="" prop="address" @click="routerLink('jobAddress')">
				<template #label>
					<view class="r-flex-between-center">
						<view class="">
							<text>*</text>
							<text>工作地点</text>
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</template>
				<u--input v-model="form.address" border="none" disabled disabledColor="#fff" placeholder="请选择工作地点"></u--input>
			</u-form-item>
			<u-form-item class="formItem" label="" prop="jobRemark">
				<template #label>
					<view class="r-flex-between-center">
						<view class="">
							<text>填写更多要求</text>
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</template>
				<u--input v-model="form.jobRemark" border="none" placeholder="选填"></u--input>
			</u-form-item>
			<u-form-item class="formItem" label="" prop="contactsUser">
				<template #label>
					<view class="r-flex-between-center">
						<view class="">
							<text>*</text>
							<text>联系人</text>
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</template>
				<u--input v-model="form.contactsUser" border="none" placeholder="请输入"></u--input>
			</u-form-item>
			<u-form-item class="formItem" label="" prop="contactsPhone">
				<template #label>
					<view class="r-flex-between-center">
						<view class="">
							<text>*</text>
							<text>手机号</text>
						</view>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</template>
				<u--input v-model="form.contactsPhone" border="none" placeholder="请输入"></u--input>
			</u-form-item>

		</u--form>
		<view class="gysBtn" @click="submitForm('gysAddMarket')">
			发布
		</view>
		
		
		<u-action-sheet
			:show="state.showSelect"
			:actions="state.actions"
			title="请选择"
			description=""
			@close="state.showSelect = false"
			@select="SelectFun">
		</u-action-sheet>
	</view>
</template>
<style lang="scss">
	.form {
		width: 686rpx;
		margin: 0 auto;
		.formItem {
			border-bottom: 1rpx solid #e7e7e7;
			.formItemArea {
				width: 100%;
			}
		}
	}

	.gysBtn {
		width: 686rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		background: #000000;
		border-radius: 10rpx;
		color: #fff;
		margin: 50rpx auto;
	}
</style>